<template>
    <div class="app-container">
        <div class="news-selector-box">
            <div class="form-box">
                <div class="form-row">
                    <div class="form-col">
                        <div class="form-group">
                            <div class="form-label">文章模块</div>
                            <div class="form-input">
                                <el-select v-model="queryParams.moduleId" placeholder="please select your zone" style="width: 100%;" @change="refreshNewsList()">
                                    <el-option v-for="(k,v) in newsModulesMap" :label="k" :value="v" :key="v"></el-option>
                                    <el-option label="全部" value="-1" ></el-option>
                                </el-select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="news-table-box">
            <table class="z-table">
                <thead>
                <tr>
                    <th style="width: 200px">ID</th>
                    <th>标题</th>
                    <th>作者</th>
                    <th>模块</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="n in pageBean.items" :key="n.id">
                    <td>{{n.id}}</td>
                    <td>{{n.title}}</td>
                    <td>{{n.author}}</td>
                    <td>{{newsModulesMap[n.moduleId]}}</td>
                    <td>
                        <a class="z-label" @click="selectEditNews(n)">编辑</a>
                        <a class="z-label danger" @click="deleteNews(n)">删除</a>
                    </td>
                </tr>
                </tbody>
            </table>
            <div class="pagination-box">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageBean.pageCount"
                    :page-sizes="[10, 20, 30, 50,80]"
                    :page-size="queryParams.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageBean.total">
                </el-pagination>
            </div>
        </div>

    </div>
</template>

<script>
    import editor from '@/components/Editor/index'
    import newsApi from '@/api/news'
    import newsModuleApi from '@/api/newsModule'
    import '@/styles/form-box.css'
    export default {
        name: "news-list",
        data:function () {
            return {
                newsModulesMap:{},
                pageBean:{
                    items:[],
                    pageCount:1,
                    pageSize:10,
                    totalPage:1,
                    total:0,
                },
                queryParams:{
                    pageCount:1,
                    pageSize:10,
                    moduleId:'-1',
                },


            }
        },
        methods:{
            refreshNewsList:function () {
                const _this = this;
                newsApi.findByPage(_this.queryParams).then(function (data) {
                        _this.pageBean = data
                        _this.pageBean.items.forEach(function (news) {
                            if (news.moduleId == null){
                                news.moduleId = '0';
                            }
                    })
                },function () {
                    _this.$message({type:'error',message:'加载文章失败'})
                })
            },
            handleCurrentChange:function (page) {
                this.queryParams.pageCount = page
                this.refreshNewsList()
            },
            handleSizeChange:function (size) {
                this.queryParams.pageSize = size
                this.queryParams.pageCount = 1
                this.refreshNewsList()
            },
            changeModuleId:function (id) {
                this.queryParams.moduleId = id
                this.refreshNewsList()
            },
            deleteNews:function (news) {
                const _this = this;
                this.$alert('是否确定删除该文章', {
                    confirmButtonText: '确定',
                    callback: action => {
                        newsApi.deleteById(news.id).then(function (data) {
                            _this.refreshNewsList()
                        }).catch(function () {
                            _this.$message({type:'error',message:'删除失败'})
                        })
                    }
                });

            },
            selectEditNews:function (news) {
                //跳转到编辑页面
                this.$router.push({path:'/news/news-edit/'+news.id})

                // news.moduleId = news.moduleId+''
                // if (news.content == null){
                //     news.content = ''
                // }
                // this.editedNews = news
            },

        },
        mounted:function () {
            const _this = this;
            _this.newsModulesMap['0'] = '草稿箱'
            newsModuleApi.findAll().then(function (data) {
                var newsModules = data;
                newsModules.forEach(function (m) {
                    _this.newsModulesMap[m.id] = m.name
                })
                _this.refreshNewsList()
            }).catch(function () {
                console.log(e)
                _this.$message({type:'error',message:'加载模块信息错误！'})
            })

        },
        components: {
            'editor': editor
        }
    }
</script>

<style scoped>
    .news-table-box .z-table{
        width: 100%;
        margin-bottom: 22px;
    }
    .pagination-box{
        width: 100%;
        text-align: center;
    }
    .news-selector-box{
        width: 100%;
    }
    .edit-box{
        width: 100%;
    }
    .news-table-box{
        margin-bottom: 40px;
    }
</style>
